<template>
  <div id="app">
    <van-tabs @change="changePage" v-model="active">
      <!-- <template #nav-left>
        <van-icon name="apps-o" size="30" color="gray" @click="$router.push('/music3')"/>
      </template> -->
      <van-tab title="首页"></van-tab>
      <van-tab title="榜单"></van-tab>
      <van-tab title="我的"></van-tab>
      <van-tab title="搜索"></van-tab>
      <!-- <template #nav-right>
        <van-icon name="search" size="30" color="gray" @click="$router.push('/search')"/>
      </template> -->
    </van-tabs>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      active:0
    }
  },
  methods:{
    changePage(){
      if(this.active == 0){
        this.$router.push('/');
      }else if(this.active == 2){
        this.$router.push('/my'); 
      }else if(this.active == 1){
        this.$router.push('/top'); 
      }else if(this.active == 3){
        this.$router.push('/search'); 
      }
    },
    curActive(){
      if(this.$route.name == 'index'){
          this.active = 0;
      }else if(this.$route.name == 'top'){
          this.active = 1;
      }else if(this.$route.name == 'my'){
          this.active = 2;
      }else if(this.$route.name == 'search'){
          this.active = 3;
      }
    }
  },
  mounted(){
      this.curActive();
  },
  updated(){
    this.curActive();
  }
}
</script>
